<style lang="stylus" scoped>
  // .el-submenu__title
  //   font-size 14px
  //   color #303133
  //   padding 0 20px
  //   cursor pointer
  //   transition border-color .3s,background-color .3s,color .3s
  //   box-sizing border-box
  // .el-menu-item, .el-submenu__title
  //   height 36px
  //   line-height 36px
  //   position relative
  //   -webkit-box-sizing border-box
  //   white-space nowrap
  //   list-style none
</style>

<template>
  <div style="display: contents">
    <div v-for="menu in menuData" :key="menu.fullPath" style="display: contents">
      <el-submenu v-if="menu.children" :index="menu.fullPath">
        <template slot="title">
          <q-icon class="q-mr-xs" :name="menu.icon" color="light-blue" style="font-size: .4em;" />
          <span slot="title" v-if="!showLabel">{{ menu.kjCode==null?$t(menu.title):menu.kjCode +'-' +$t(menu.title) }}</span>
        </template>
        <menu-item-wrap :menu-data="menu.children"></menu-item-wrap>
      </el-submenu>
      <el-menu-item v-else :index="menu.fullPath">
        <q-icon class="q-mr-xs" :name="menu.icon" color="light-blue" style="font-size: .4em;" />
        <span slot="title" v-if="!showLabel">{{ menu.kjCode==null?$t(menu.title):menu.kjCode +'-' +$t(menu.title) }}</span>
      </el-menu-item>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuItemWrap',
  props: {
    menuData: {
      type: Array,
      default () {
        return []
      },
      required: true
    },
    showLabel: {
      default: false
    }
  },
  data () {
    return {
      code: ''
    }
  }
}
</script>
